<template>
    <div class="container bg">
        <div class="Nav">
            <p class="pric" @click="pric"></p>
            <div class="title">{{ name }}</div>
            <p></p>
        </div>

        <div class="images"><img :src="listData.imgs" alt=""></div>
        <div class="titles">
            <ul>
                <li>
                    <div class="left">
                        <div class="title">{{ listData.title }}</div>
                        <div class="pirces">￥{{ listData.price }}</div>
                    </div>
                    <div class="right" @click="showShare = true">
                        分享

                    </div>
                </li>
            </ul>
        </div>

        <div class="zuozhe">
            <div class="img"><img src="../assets/img/tx_nologin (1).png" alt=""></div>
            <div class="proName">p_b********</div>
            <div class="next"></div>
        </div>

        <div class="bodys">
            <div class="tabs">
                <div :class="['item', num == 0 ? 'con' : '']" @click="num = 0">商品描述</div>
                <div :class="['item', num == 1 ? 'con' : '']" @click="num = 1">交易说明</div>
            </div>
            <div v-if="num == 1"><img src="../assets/img/购买5.png" alt=""></div>

            <div v-if="num == 0">
                <div class="list">
                    <span>所在区服:</span>
                    <div class="his">{{ listData.operatorName }}/{{ listData.gameServerName }}</div>
                </div>
                <div class="list">
                    <span>{{ listData.bizCategoryProperty[0].name }}:</span>
                    <div class="his">{{ listData.bizCategoryProperty[0].value }}</div>
                </div>
                <div class="list">
                    <span>{{ listData.bizCategoryProperty[1].name }}:</span>
                    <div class="his">{{ listData.bizCategoryProperty[1].value }}</div>
                </div>
                <div class="list">
                    <span>{{ listData.bizCategoryProperty[2].name }}:</span>
                    <div class="his">{{ listData.bizCategoryProperty[2].value }}</div>
                </div>
                <div class="list">
                    <span>能否提供帐号绑定的身份证号码:</span>
                    <div class="his">能</div>
                </div>
                <div class="shop">
                    <div class="span">商品描述:</div>
                    <div class="his">
                        购买后联系客服取号，未绑定手机，取号后自行绑定。看清区服，为御香归区预约号，新区开区后建立角色邮箱领取式神，不要问卖家在不在，卖家不能24小时在线发货，商品是寄售，拍下联系客服就行。
                    </div>
                </div>
            </div>

        </div>

        <div class="bottom_fied">
            <div class="RMB">￥ {{ listData.price }}</div>
            <div :class="['likes', colles ? 'con' : '']" @click="colless(listData.id)">{{ favortesText }}</div>
            <button @click="getbuy()">立即购买</button>
        </div>
        <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            show_id: null,
            num: 0,
            name: window.localStorage.getItem("name"),
            listData: null,
            showShare: false,
            id:[],
            colles: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
        };
    },
    methods: {
        pric() {
            this.$router.go(-1)
        },
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        getbuy() {
            this.$router.push({
                path: "/gobuy",
                query: {
                    listData: this.listData
                }
            })
            console.log(this.listData);
        },

        colless(id) {
            // console.log(id);
            
            // this.colles=!this.colles;
            // // let aa=
            // this.id=[]
            // console.log(window.localStorage.getItem("id"));
            // this.id = JSON.parse(window.localStorage.getItem("id"));
            // console.log(this.id,'11');

            // this.id.push({
            //     id:id
            // })

            // window.localStorage.setItem("id", JSON.stringify( this.id));
            // if( window.localStorage.getItem("id")){
            //     let aa=JSON.parse(window.localStorage.getItem("id")) 
            //     aa.findIndex((item)=>{item == id})
            //     if(aa){
            //         this.colles = true
            //     }
            // }
            this.colles = !this.colles
            if(this.colles ==true){
                this.$emit("colless", this.listData);
                console.log(id);
            }
            

            
        }

    },
    computed: {
        favortesText() {
            return this.colles ? '已收藏' : '收藏'
        }
    },
    created() {
        var obj = unescape(window.localStorage.getItem("obj"));
        if (obj) {
            this.listData = JSON.parse(obj)
            console.log(this.listData);
        }
    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.bg {
    background-color: #f1f1f1;
    height: 100vh;
}

.Nav {
    height: 48px;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;

    .pric {
        width: 17px;
        height: 17px;
        background: url(../assets/img/left.png) no-repeat center center;
        background-size: 100%;
        margin: 0px 10px;
    }

    p {
        width: 17px;
        height: 17px;
        background: url(../assets/img/header-member-top.png) no-repeat center center;
        background-size: 100%;
        margin: 0px 10px;
    }
}

.images {
    margin-top: 48px;
    height: 212px;

    img {
        height: 100%;
    }
}

.titles {
    height: 100px;
    background-color: #fff;

    ul {
        li {
            display: flex;

            .left {
                display: flex;
                flex-direction: column;
                width: 307px;

                font-size: 15px;
                color: #1a1e08;

                .title {
                    padding: 12px 9px 12px 14px;
                }

                .pirces {
                    font-size: 14px;
                    color: #ff6d29;
                    padding-left: 14px;
                }
            }

            .right {
                width: 34px;
                height: 41px;
                line-height: 61px;
                background: url(../assets/img/share_02.png)no-repeat center 0;
                background-size: 50%;
                margin: 14px 14px 0 14px;
            }
        }
    }
}

.zuozhe {
    height: 64px;
    background-color: #fff;
    margin-top: 10px;
    display: flex;
    align-items: center;

    .img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 9px;

        img {
            border-radius: 50%;
        }
    }

    .proName {
        flex: 1;
    }

    .next {
        width: 58px;
        height: 100%;
        background: url(../assets/img/lease-list-ico.png)no-repeat center center;
        background-size: 20%;
    }
}

.bodys {
    height: 470px;
    margin-top: 8px;
    padding-bottom: 48px;
    background-color: #fff;

    .tabs {
        display: flex;

        .item {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #eeeeee;
            background-color: #f8f8f8;
            color: #666764;
            font-size: 16px;

            &.con {
                background-color: #ffffff;
                color: #ff8d0a;
                border-bottom: none;
            }
        }
    }

    .list {
        height: 52px;
        border-bottom: 2px solid #f3f3f3;
        display: flex;
        align-items: center;

        span {
            margin-left: 14px;
            font-size: 14px;
            color: #8a8a8d;
        }

        .his {
            margin-left: 44px;
            font-size: 15px;
            color: #2f3535;
        }
    }

    .shop {
        height: auto;
        display: flex;

        .span {
            margin-left: 14px;
            margin-top: 13px;
            font-size: 14px;
            color: #8a8a8d;
            width: 60px;
        }

        .his {
            width: 242px;
            margin-left: 44px;
            margin-top: 13px;
            font-size: 15px;
            color: #2f3535;
        }
    }
}

.bottom_fied {
    height: 47px;
    border-top: 2px solid #f4f4f2;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;

    .RMB {
        width: 193px;
        height: 46px;
        line-height: 46px;
        border-right: 2px solid #f4f4f2;
        font-size: 15px;
        color: #ff5900;
        padding-left: 10px;
    }

    .likes {
        width: 58px;
        height: 47px;
        background: url(../assets/img/colleclist.png)no-repeat center 0;
        background-size: 50%;
        text-align: center;
        padding-top: 30px;
        font-size: 13px;
        color: #4c525c;

        &.con {
            background: url(../assets/img/colleclistlight.png)no-repeat center 0;
            background-size: 50%;
        }
    }

    button {
        width: 50%;
        border: none;
        background-color: #ff6600;
        font-size: 15px;
        color: #fff;
    }
}
</style>